<template>
    <div style="padding: 0 16px">
        <div v-for="menu in menuList" v-if="menu.child && menu.child.length > 0 && menu.pid !== '0' && menu.pid !== ''">
            <div :class="'menu' + (active === menu.id?' active':'')" @click="itemClick(menu.id)">{{menu.name}}</div>
            <menu-child :menuList="menu.child" :active="active" @menu-click="menuClick"></menu-child>
        </div>
        <div v-else-if="menu.child && menu.child.length > 0 && (!menu.pid || menu.pid === '0' || menu.pid === '')">
            <div :class="'menu' + (active === menu.id?' active':'')"
                 style="font-size: 18px; font-weight: 600;margin: 16px 0 20px 0" @click="itemClick(menu.id)">
                {{menu.name}}
            </div>
            <menu-child :menuList="menu.child" :active="active" @menu-click="menuClick"></menu-child>
        </div>
        <div :class="(active === menu.id?'menu active':'menu')" v-else @click="itemClick(menu.id)">{{menu.name}}</div>
    </div>
</template>

<script>
    export default {
        name: 'menuChild',
        props: {
            menuList: Array,
            active: String
        },
        methods: {
            menuClick(menuId) {
                this.$emit('menu-click', menuId);
            },
            itemClick(menuId) {
                this.$emit('menu-click', menuId);
            }
        }
    };
</script>

<style lang="scss" scoped>
    .menu {
        cursor: pointer;
        &.active {
            color: #2d8cf0;
        }
    }
</style>